<route lang="json5" type="payList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '设备管理 > 出货日志',
    enablePullDownRefresh:false
  },
}
</route>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'
import { getPayList } from '@/api/device'

// 设备编号（筛选）
const query_sb_chked_rs = ref([''])
const sbList = ref([
  {
    label: '设备1',
    value: '123456',
  },
  {
    label: '设备2',
    value: '654321',
  },
])

// 商品分类（筛选）
const query_class_chked_rs = ref([''])
const categoryList = ref([
  {
    label: '幸运礼盒',
    value: '678362',
  },
  {
    label: '幸运礼盒2',
    value: '678362',
  },
])

const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const page = ref(1)
function loadMore() {
  console.log('滚动到底部加载更多数据')
  getPayList({ page: page.value }).then((res: any) => {
    console.log(res)
    const { code, text } = res
    if (code === 0) {
      loadState.value = 'error'
      uni.showToast({
        title: text,
        icon: 'none',
      })

      // uni.redirectTo({
      //   url: '/pages/login/login',
      // })
    }
  })
}

const showEdit = ref(false)
const editRef = ref()
const formModel = ref({
  name: '',
  price: '',
  date: dayjs().format('YYYY-MM-DD HH:mm:ss'),

})
function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      handleClose()
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
function handleEdit() {
  showEdit.value = true
  if (editRef.value) {
    editRef.value.reset()
  }
}
function handleClose() {
  showEdit.value = false
}
</script>

<template>
  <wd-drop-menu class="drop-menu">
    <wd-drop-menu-item ref="dropMenu2" title="按: 商品分类">
      <view class="drop-content">
        <view class="drop-label">
          设备编号（筛选）
        </view>
        <wd-checkbox-group v-model="query_sb_chked_rs" inline>
          <wd-checkbox v-for="(item) in sbList" :key="item.value" :model-value="item.value">
            <wd-tag bg-color="#7232dd" custom-class="tag">
              {{ item.label }}
            </wd-tag>
            <wd-tag plain custom-class="tag" bg-color="#c8c9cc" color="#c8c9cc">
              ID:{{ item.value }}
            </wd-tag>
          </wd-checkbox>
        </wd-checkbox-group>
        <view class="describe">
          <view>说明：</view>
          <view>选择则：按子条件查询，不选择则：查询所有</view>
        </view>
      </view>
    </wd-drop-menu-item>
    <wd-drop-menu-item ref="dropMenu" title="按: 设备编号">
      <view class="drop-content">
        <view class="drop-label">
          商品分类（筛选）
        </view>
        <wd-checkbox-group v-model="query_class_chked_rs" inline>
          <wd-checkbox v-for="(item) in categoryList" :key="item.value" :model-value="item.value">
            <wd-tag bg-color="#7232dd" custom-class="tag">
              {{ item.label }}
            </wd-tag>
            <wd-tag plain custom-class="tag" bg-color="#c8c9cc" color="#c8c9cc">
              ID:{{ item.value }}
            </wd-tag>
          </wd-checkbox>
        </wd-checkbox-group>
        <view class="describe">
          <view>说明：</view>
          <view>选择则：按子条件查询，不选择则：查询所有</view>
        </view>
      </view>
    </wd-drop-menu-item>
  </wd-drop-menu>
  <view class="confirm-btn">
    <wd-button type="primary" size="small" block @click="handleSubmit">
      筛选查询
    </wd-button>
  </view>
  <view class="wot-list">
    <view class="wot-row wot-title">
      <wd-row>
        <wd-col :span="5">
          <view class="wot-item">
            商品名称
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            销量
          </view>
        </wd-col>
        <wd-col :span="6">
          <view class="wot-item">
            设备ID
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item">
            操作时间
          </view>
        </wd-col>
      </wd-row>
    </view>
    <scroll-view class="scroll-view" :scroll-y="true" @scrolltolower="loadMore">
      <view v-for="(item, index) in 40" :key="index" class="wot-row">
        <wd-row>
          <wd-col :span="5">
            <view class="wot-item">
              <wd-tag custom-class="tag" bg-color="#7232dd">
                幸运礼盒
              </wd-tag>
            </view>
          </wd-col>
          <wd-col :span="5">
            <view class="wot-item">
              <wd-tag custom-class="tag" bg-color="#07c160">
                12
              </wd-tag>
            </view>
          </wd-col>
          <wd-col :span="6">
            <view class="wot-item">
              <wd-tag custom-class="tag" bg-color="#07c160">
                17900016
              </wd-tag>
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item font-sm">
              2025-09-23 14:00:00
            </view>
          </wd-col>
        </wd-row>
        <view class="font-sm px-10rpx pt-4rpx">
          备注：xxx
        </view>
      </view>
      <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
    </scroll-view>
  </view>
  <wd-action-sheet v-model="showEdit" title="【 编辑 > 入库 】" @close="handleClose">
    <view class="action-sheet-content">
      <wd-form ref="editRef" :model="formModel">
        <wd-cell-group>
          <wd-input
            v-model="formModel.name"
            label="标签名称"
            label-width="100px"
            prop="name"
            clearable
            placeholder="如：机器类型"
            :rules="[{ required: true, message: '标签名称不能为空' }]"
          />
          <wd-input
            v-model="formModel.price"
            label="标签说明"
            label-width="100px"
            prop="price"
            clearable
            placeholder="对类型备注"
            :rules="[{ required: true, message: '标签说明不能为空' }]"
          />
          <wd-input
            v-model="formModel.date"
            label="添加时间"
            label-width="100px"
            prop="coin"
            clearable
            readonly
          />
        </wd-cell-group>
      </wd-form>
    </view>
  </wd-action-sheet>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.scroll-view {
    height: calc(100vh - 360rpx - env(safe-area-inset-bottom));
}
.confirm-btn {
  padding: 20rpx;
  width: 80%;
  margin: auto;
}
.footer {
    padding: 30rpx;
    background-color: #fff;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom));
    left: 0;
    right: 0;
}
.drop-menu{
  box-shadow: 0 2px 12px rgba(100,101,102,.12);
  .drop-content{
    padding: 0 20rpx 20rpx;
  }
}

:deep(.tag) {
  padding: 4rpx 10rpx;
  font-size: $uni-font-size-sm;
  line-height: 24rpx;
  margin-right: 10rpx;
}

.font-sm {
  font-size: $uni-font-size-sm;
  color: $uni-text-title;
}
.describe {
  color: $uni-color-yellow;
  padding: 20rpx 0;
  margin-top: 30rpx;
  font-size: $uni-font-size-sm;
  border-top: 1rpx solid #dbdbdb;
}
</style>
